<template>
  <div class="container">
    <div class="compatiblePercent">
      <div class="compatiblePercentEcharts">
        <Echarts
          :id="keyWord + echartsId"
          width="300px"
          height="200px"
          :options="option"
        />
      </div>
      <div style="width: 80px"></div>
      <el-table
        v-if="tableListData"
        :data="
          tableListData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        :height="300"
        border
      >
        <el-table-column width="200px" align="center" prop="name" label="名称">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
        </el-table-column>

        <el-table-
          column
          align="center"
          v-if="title == '表评估结果'"
          prop="rowSize"
          label="行数"
        />
        <el-table-column align="center" prop="ddlSql" label="DDL">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          v-if="title == '表评估结果'"
          prop="allColsSize"
          label="列总数"
        />
        <el-table-column
          align="center"
          v-if="title == '表评估结果'"
          prop="bigColsSize"
          label="大字段"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleColumns(scope.row, 'bigDataCols')"
              type="text"
              size="small"
              >{{ scope.row.bigColsSize }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="specialColsSize"
          label="特殊字段"
          v-if="title == '表评估结果'"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleColumns(scope.row, 'specialDataCols')"
              type="text"
              size="small"
              >{{ scope.row.specialColsSize }}</el-button
            >
          </template></el-table-column
        >
        <el-table-column
          align="center"
          prop="compatibleColsSize"
          label="兼容字段数"
          v-if="title == '表评估结果'"
        />
        <el-table-column
          align="center"
          prop="unKnowColsSize"
          label="未知字段数"
          v-if="title == '表评估结果'"
        >
          <template slot-scope="scope">
            <el-button
              @click="handleColumns(scope.row, 'unKnowCols')"
              type="text"
              size="small"
              >{{ scope.row.unKnowColsSize }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column align="center" prop="matchType" label="匹配类型">
          <template slot-scope="scope">
            <span
              v-for="item in dict.type.appraise_compatiblestatus"
              :key="item.value"
            >
              <el-tag
                v-if="item.value == scope.row.matchType"
                :type="item.raw.listClass"
              >
                <!-- {{ item.value == scope.row.matchType ? item.label : "" }} -->
                {{ item.label }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="timeConsuming" label="耗时" />
      </el-table>
    </div>
    <el-dialog title="DDL查看" :visible.sync="dialogVisible" width="65%">
      <div>
        <CodeEditor
          :key="random"
          :editorHight="200"
          :readOnly="true"
          :codeData="codeData"
        />
        <el-table
          style="margin-top: 10px"
          v-if="funcDiffTableData"
          height="200px"
          border
          :data="funcDiffTableData"
        >
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="level" label="状态"> </el-table-column>
          <el-table-column prop="desc" label="描述" />
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="查看列属性" :visible.sync="open" width="60%">
      <div>
        <el-table height="200px" :data="columnsTableData" style="width: 100%">
          <el-table-column prop="columnName" label="列名称" width="180">
          </el-table-column>
          <el-table-column prop="columnType" label="列类型" width="180">
          </el-table-column>
          <el-table-column prop="columnDisplaySize" label="列长度" />
          <el-table-column prop="columnComment" label="注释"> </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Echarts from "./echarts.vue";
import CodeEditor from "@/components/CodeEditor/index.vue";

export default {
  name: "TableTwo",
  components: { Echarts, CodeEditor },
  props: {
    tableList: {
      default: () => [],
    },
    echartsId: {
      type: String,
      required: true,
    },
    title: {
      type: String,
    },
    keyWord: {
      type: String,
    },
  },
  dicts: ["appraise_compatiblestatus"],
  data() {
    return {
      search: "",
      funcDiffTableData: [],
      random: "",
      open: false,
      option: {
        title: {
          text: "",
          left: "center",
          top: "center",
          textStyle: {
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "item",
          top: "center",
          left: "center",
        },
        legend: {
          orient: "vertical",
          top: "0%",
          left: "right",
        },
        series: [
          {
            name: "兼容性",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: "兼容", itemStyle: { color: "#91CC75" } },
              { value: 0, name: "转换兼容", itemStyle: { color: "#FFD14A" } },
              { value: 0, name: "不兼容", itemStyle: { color: "#FF7070" } },
            ],
          },
        ],
      },
      dialogVisible: false,
      codeData: "",
      columnsTableData: [],
      tableListData: null,
    };
  },
  mounted() {
    this.tableListData = this.$props.tableList.objectList[this.$props.keyWord];
    const { compatiblePercent, convertPercent, unCompatiblePercent } =
      this.$props.tableList.sinkStatisticsMap[[this.$props.keyWord]];
    this.option.title.text = `兼容性${Math.ceil(
      (compatiblePercent + convertPercent) * 100
    )}%`;
    this.option.series[0].data[0].value = Math.ceil(compatiblePercent * 100);
    this.option.series[0].data[1].value = Math.ceil(convertPercent * 100);
    this.option.series[0].data[2].value = Math.ceil(unCompatiblePercent * 100);
  },
  methods: {
    numConver(data) {
      return Number(data.split("%")[0]);
    },
    handleClick(row) {
      this.random = Math.random();
      this.funcDiffTableData = row.funcDiff;
      this.codeData = row.ddlSql;
      this.dialogVisible = true;
    },
    handleColumns(row, type) {
      this.columnsTableData = row[`${type}`];
      this.open = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  background: #fff;
  margin: 0 !important;
  h3 {
    margin: 5px 0;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 16px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .tableList-card {
    width: 100%;
    margin-top: 10px !important;
  }

  .compatiblePercent {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: space-between;

    .compatiblePercentEcharts {
      display: flex;
      align-items: center;
    }
  }
}

::v-deep .el-card + .el-card {
  margin: 0;
}
</style>
